<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: solid 1px black;
				display: block;
				margin: 50px auto;
			}
		</style>
		<script type="text/javascript">
			document.addEventListener("DOMContentLoaded",function(){
				var canvas = document.querySelector("canvas");
				canvas.width = 500;
				canvas.height = 500;
				var ctx = canvas.getContext("2d");
				var i = 0 ;
				setInterval(function(){
					i ++ ;
					if (i % 2){
						canvas.width = 500;
						canvas.height = 500;
						ctx.translate(250,250);
						
						ctx.strokeStyle= "ffa41e";
						ctx.fillStyle = "#ffd756";
						ctx.lineWidth = 2;
						ctx.arc(0,0,200,0,360*Math.PI/180,false);
						ctx.fill();
						ctx.stroke();
						
						ctx.fillStyle = "#ffcc66";
						ctx.fillRect(60,-30,130,55);
						ctx.fillRect(-190,-30,130,55);
						ctx.stroke();
						ctx.fillStyle = "#de6400";
						ctx.fillRect(10,-65,150,14);
						ctx.fillRect(-160,-65,150,14);
						ctx.stroke();
						
						ctx.beginPath();
						ctx.strokeStyle = "red";
						ctx.lineWidth = 10;
						ctx.moveTo(-40,70);
						ctx.quadraticCurveTo(-15,110,0,70);	
						ctx.quadraticCurveTo(15,110,40,70);
						ctx.stroke();
						
						ctx.beginPath();
						ctx.strokeStyle = "#a35000";
						ctx.lineWidth = 10;
						ctx.moveTo(-140,-120);
						ctx.quadraticCurveTo(-100,-170,-15,-100);
						ctx.stroke();
						ctx.beginPath();
						ctx.moveTo(140,-120);
						ctx.quadraticCurveTo(100,-170,15,-100);
						ctx.stroke();
					}else{
						canvas.width = 500;
						canvas.height = 500;
						ctx.translate(250,250);
						
						ctx.strokeStyle= "ffa41e";
						ctx.fillStyle = "#ffd756";
						ctx.lineWidth = 2;
						ctx.arc(0,0,200,0,360*Math.PI/180,false);
						ctx.fill();
						ctx.stroke();
						
						ctx.fillStyle = "#ffcc66";
						ctx.fillRect(60,-30,130,55);
						ctx.fillRect(-190,-30,130,55);
						ctx.stroke();
						
						ctx.beginPath();
						ctx.strokeStyle= "#e27000";
						ctx.fillStyle = "#FFFFFF";
						ctx.lineWidth = 3;
						ctx.arc(-100,-85,75,0,360*Math.PI/180,false);
						ctx.fill();
						ctx.stroke();
						ctx.beginPath();
						ctx.arc(100,-85,75,0,360*Math.PI/180,false);
						ctx.fill();
						ctx.stroke();
						
						ctx.beginPath();
						ctx.fillStyle = "black";
						ctx.arc(-80,-75,20,0,360*Math.PI/180,false);
						ctx.fill();
						ctx.beginPath();
						ctx.arc(80,-75,20,0,360*Math.PI/180,false);
						ctx.fill();
						
						ctx.beginPath();
						ctx.strokeStyle = "red";
						ctx.lineWidth = 10;
						ctx.moveTo(0,70);
						ctx.quadraticCurveTo(-30,100,0,120);
						ctx.quadraticCurveTo(30,100,0,70);
						ctx.stroke();
						
						ctx.beginPath();
						ctx.strokeStyle = "#a35000";
						ctx.lineWidth = 10;
						ctx.moveTo(-140,-170);
						ctx.quadraticCurveTo(-100,-220,-15,-150);
						ctx.stroke();
						ctx.beginPath();
						ctx.moveTo(140,-170);
						ctx.quadraticCurveTo(100,-220,15,-150);
						ctx.stroke();
					}
				},1000)
			})
		</script>
	</head>
	<body>
		<canvas></canvas>
	</body>
</html>
